<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <section id="container" class="container"> 
 <div class="controls">
   <fieldset class="input-group"> 
     <input type="file" accept="image/*;capture=camera">
        <button id="btnIdents">识别</button>
        <div id="wenzi"></div>
   </fieldset>
 </div> 
 <div id="interactive" class="viewport"><br clear="all"></div> 
 </section> 
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>

<!--<link rel="stylesheet" type="text/css" href="./css/fileinput.css">-->
<!-- <script src="./js/file_input.js" type="text/javascript"></script> -->
<script src="js/quagga.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {var App = {
        // init: function() {
        //     App.attachListeners();
        // },
        attachListeners: function() {
            var self = this;
            $("#btnIdents").on("click",function(e) {
                var input = document.querySelector("input[type=file]");
                if (input.files && input.files.length) {
                    App.decode(URL.createObjectURL(input.files[0]));
                }
            });
        },
        decode: function(src) {
            var self = this,
                config = $.extend({}, self.state, {src: src});
            Quagga.decodeSingle(config, function(result) {
                console.log(result)
                //识别结果
                if(result.codeResult){
                    $("#wenzi").html("图片中的条形码为：" + result.codeResult.code)
                    alert("图片中的条形码为：" + result.codeResult.code );
                }else{
                    alert("未识别到图片中的条形码！");
                    $("#wenzi").html("未识别到图片中的条形码！")
                }
                
            });
        },
        state: {
            inputStream: {
                size: 800,
                singleChannel: false
            },
            locator: {
                patchSize: "medium",
                halfSample: true
            },
//          , 'code_39_reader','code_128_reader',"ean_reader", 
                decoder: {
                 readers: [{
                     format: ['ean_reader'], //条形码种类很多,选择适合自己的
                     config: {}
                 }]
             },
            locate: true,
            src: null
        }
    };

    // App.init();
    App.attachListeners();
});

</script>

</body>
</html>